﻿@{
    ViewBag.Title = "XAxischange";
    Layout = "~/Views/Shared/_Layout.cshtml";
    
    
}


@*    .k-chart
    {
        height: 280px;
        padding: 37px;
        width: 590px;
    }
*@
<h2>
    XAxischange</h2>

<script src="../../Scripts/kendo.all.min.js" type="text/javascript"></script>

  <div id="example" class="k-content">
            <div class="chart-wrapper">
                <div id="chart"></div>
            </div>
            <div class="configuration-horizontal">
                <div class="config-section">
                <span class="configHead">Base date unit</span>
                <ul class="options">
                    <li>
                        <input id="baseUnitAuto" name="baseUnit"
                                type="radio" value="" autocomplete="off" />
                        <label for="baseUnitAuto">Automatic (default)</label>
                    </li>
                    <li>
                        <input id="baseUnitYears" name="baseUnit"
                                type="radio" value="years" autocomplete="off" />
                        <label for="baseUnitYears">Years</label>
                    </li>
                    <li>
                        <input id="baseUnitMonths" name="baseUnit"
                                type="radio" value="months" autocomplete="off" />
                        <label for="baseUnitMonths">Months</label>
                    </li>
                    <li>
                        <input id="baseUnitWeeks" name="baseUnit"
                                type="radio" value="weeks" checked="checked" autocomplete="off" />
                        <label for="baseUnitWeeks">Weeks</label>
                    </li>
                    <li>
                        <input id="baseUnitDays" name="baseUnit"
                                type="radio" value="days" autocomplete="off" />
                        <label for="baseUnitDays">Days</label>
                    </li>
                </ul>
                </div>
                <div class="config-section">
                <span class="configHead">Aggregate function</span>
                <ul class="options">
                    <li>
                        <input id="aggregateMax" name="aggregate"
                                type="radio" value="max" autocomplete="off" />
                        <label for="aggregateMax">Max (default)</label>
                    </li>
                    <li>
                        <input id="aggregateMin" name="aggregate"
                                type="radio" value="min" autocomplete="off" />
                        <label for="aggregateMin">Min</label>
                    </li>
                    <li>
                        <input id="aggregateSum" name="aggregate"
                                type="radio" value="sum" autocomplete="off" />
                        <label for="aggregateSum">Sum</label>
                    </li>
                    <li>
                        <input id="aggregateAvg" name="aggregate"
                                type="radio" value="avg" checked="checked" autocomplete="off" />
                        <label for="aggregateAvg">Avg</label>
                    </li>
                    <li>
                        <input id="aggregateCount" name="aggregate"
                                type="radio" value="count" autocomplete="off" />
                        <label for="aggregateCount">Count</label>
                    </li>
                </ul>
                <p>Custom aggregate functions are supported.</p>
                </div>
            </div>
            <script>
                function createChart() {
                    $("#chart").kendoChart({
                        series: [{
                            type: "column",
                            data: [30, 50, 45, 40, 35, 40, 42, 40, 35, 43, 38, 30, 48, 50, 55, 35, 30],
                            aggregate: "avg"
                        }],
                        categoryAxis: {
                            baseUnit: "weeks",
                            categories: [
                                new Date("2011/12/20"),
                                new Date("2011/12/21"),
                                new Date("2011/12/22"),
                                new Date("2011/12/23"),
                                new Date("2011/12/24"),
                                new Date("2011/12/25"),
                                new Date("2011/12/26"),
                                new Date("2011/12/27"),
                                new Date("2011/12/28"),
                                new Date("2011/12/29"),
                                new Date("2011/12/30"),
                                new Date("2011/12/31"),
                                new Date("2012/01/01"),
                                new Date("2012/01/02"),
                                new Date("2012/01/03"),
                                new Date("2012/01/04"),
                                new Date("2012/01/05"),
                            ],
                            majorGridLines: {
                                visible: false
                            }
                        },
                        valueAxis: {
                            line: {
                                visible: false
                            }
                        }
                    });
                }

                $(document).ready(function () {
                    setTimeout(function () {
                        // Initialize the chart with a delay to make sure
                        // the initial animation is visible
                        createChart();

                        $("#example").bind("kendo:skinChange", function (e) {
                            createChart();
                        });
                    }, 400);

                    $(".configuration-horizontal").bind("change", refresh);
                });

                function refresh() {
                    var chart = $("#chart").data("kendoChart"),
                        series = chart.options.series,
                        categoryAxis = chart.options.categoryAxis,
                        baseUnitInputs = $("input:radio[name=baseUnit]"),
                        aggregateInputs = $("input:radio[name=aggregate]");

                    for (var i = 0, length = series.length; i < length; i++) {
                        series[i].aggregate = aggregateInputs.filter(":checked").val();
                    };

                    categoryAxis.baseUnit = baseUnitInputs.filter(":checked").val();

                    chart.refresh();
                }
            </script>
            <style scoped>
                .chart-wrapper, .chart-wrapper .k-chart {
                    height: 300px;
                }
            </style>
        </div>
